<!DOCTYPE html>
<html lang="en">

<body>
  
    <svg viewBox="0 0 100 100" width="200" height="200">
       <rect x="20" y="20" width="0" height="10" fill="#f00">
             <animate id="a61" attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="3s"
				 begin="t.click"
                 fill="freeze"
                 repeatCount="1"
                 />
        </rect>

        <rect x="40" y="30" width="0" height="10" fill="#f00">
            <animate id="a61" attributeType="XML"
                attributeName="width"
                to="20"
                dur="1s"
				begin="t.click"
                end="a61.end"
                fill="freeze"
                repeatCount="indefinite"
                />
       </rect>
		
		<text x="50" y="80" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我</text>
    </svg>

    


</body>
</html>
